<template>
    <div class="sys-container">
        <el-dialog v-model="state.isShowDialog" draggable width="769px">
            <template #header>
                <div style="color: #fff">
                    <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
                    </el-icon>
                    <span> {{ props.title }} </span>
                </div>
            </template>
            <el-form :model="state.ruleForm" ref="ruleFormRef" size="default" label-width="80px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="起始结束">
                            <el-button @click="secondarySetup('time')" size="default">设置起始小时 - 结束小时</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="到量控制">
                            <el-button @click="secondarySetup('type')" size="default">设置请求上限 - 用户上限</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="状态">
                            <el-radio-group v-model="state.ruleForm.status" class="ml-4">
                                <el-radio :label="1">启用</el-radio>
                                <el-radio :label="4">短期关停</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="当日同步" prop="controlLevel">
                            <el-radio-group v-model="state.ruleForm.syncPlanDaily" class="ml-4">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="2">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel('1')" size="default">取 消</el-button>
                    <el-button type="primary" @click="submit('1')" size="default">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>

    <!-- 二次弹框 -->
    <div class="sys-container">
        <el-dialog v-model="state.isTwoShowDialog" draggable width="769px">
            <template #header>
                <div style="color: #fff">
                    <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
                    </el-icon>
                    <!-- <span> {{ props.title }} </span> -->
                </div>
            </template>
            <el-form :model="state.ruleForm" ref="ruleFormRef" size="default" label-width="80px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-show="state.trends == 'time'">
                        <el-form-item label="起始小时" prop="dailyStartHour">
                            <el-input-number v-model.trim="state.ruleForm.dailyStartHour" placeholder="请输入起始小时" :min="0"
                                :max="23" controls-position="right" class="w100"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-show="state.trends == 'time'">
                        <el-form-item label="结束小时" prop="dailyEndHour">
                            <el-input-number v-model.trim="state.ruleForm.dailyEndHour" placeholder="请输入结束小时" :min="1"
                                :max="23" controls-position="right" class="w100"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10" class="mb20" v-show="state.trends == 'type'">
                        <el-form-item label="到量控制" prop="arrivalType">
                            <el-radio-group v-model.trim="state.ruleForm.arrivalType">
                                <el-radio :label="1">请求</el-radio>
                                <el-radio :label="2">用户</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7" class="mb20" v-show="state.trends == 'type'">
                        <el-form-item label="请求上限" prop="requestLimit">
                            <el-input-number v-model.trim="state.ruleForm.requestLimit" placeholder="请输入上限" :min="0"
                                controls-position="right" class="w100"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7" class="mb20" v-show="state.trends == 'type'">
                        <el-form-item label="用户上限" prop="userLimit">
                            <el-input-number v-model.trim="state.ruleForm.userLimit" placeholder="请输入用户上限" :min="0"
                                controls-position="right" class="w100"></el-input-number>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <el-divider>
                是否要对以下 {{ state.tableData.length }} 项进行操作？
            </el-divider>
            <el-table :data="state.tableData" style="width: 100%" max-height="250">
                <el-table-column fixed prop="customerName" label="客户名称" width="200" show-overflow-tooltip />
                <el-table-column prop="productName" label="产品名称" width="150" show-overflow-tooltip />
                <el-table-column prop="province" label="开通省份" align="center" width="100" show-overflow-tooltip />
                <el-table-column prop="dailyStartHour" label="起始小时" width="120" align="center" show-overflow-tooltip />
                <el-table-column prop="dailyEndHour" label="结束小时" width="120" align="center" show-overflow-tooltip />
                <el-table-column fixed="right" label="操作" width="60">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel('2')" size="default">取 消</el-button>
                    <el-button type="primary" @click="submit('2')" size="default">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="editBatchDiProductPlan">
import { reactive, ref } from 'vue';
import mittBus from '/@/utils/mitt';
import { DiProductPlan } from '/@/api/models';
import SysDiProductPlanApi from '/@/api/delivery/productPlan';
import { ElMessage } from 'element-plus';

const props = defineProps({
    title: String,
});

const ruleFormRef = ref();
const state = reactive({
    UTCDateRange: [new Date(), new Date()],
    productDict: [],
    isShowDialog: false,
    ruleForm: {} as DiProductPlan,
    arrList: <any>[],
    tableData: [],
    isTwoShowDialog: false,
    trends: ''
});



// 打开弹窗
const openDialogedit = async (row: DiProductPlan, list: any) => {
    state.ruleForm = row;
    state.isShowDialog = true;
    state.arrList = list;
    // 刚进入弹框的时候获取到的数据
    // console.log(list, 'list');
    state.tableData = list;
};

// 关闭弹窗
const closeDialog = () => {
    mittBus.emit('submitRefresh');
    state.isShowDialog = false;
};

// 取消
const cancel = (val: string) => {
    if (val == '1') {
        state.isShowDialog = false;
        closeDialog();
    } else {
        state.isTwoShowDialog = false;
        closeDialog();
    }
};


// 提交
const submit = (val: string) => {
    if (val == '1') {
        ruleFormRef.value.validate(async (valid: boolean) => {
            if (!valid) return;
            let arr: any = [{
                arrivalType: -1,
                dailyEndHour: -1,
                dailyStartHour: -1,
                requestLimit: -1,
                status: -1,
                syncPlanDaily: -1,
                userLimit: -1,
            }];
            let obj = Object.assign(arr[0], state.ruleForm)
            arr[0] = obj;
            // console.log(arr, 'sss');
            arr.map((item: any) => {
                state.arrList.forEach(i => {
                    i.arrivalType = item.arrivalType || i.arrivalType;
                    i.dailyEndHour = item.dailyEndHour || i.dailyEndHour;
                    i.dailyStartHour = item.dailyStartHour || i.dailyStartHour;
                    i.requestLimit = item.requestLimit || i.requestLimit;
                    i.status = item.status || i.status;
                    i.syncPlanDaily = item.syncPlanDaily || i.syncPlanDaily;
                    i.userLimit = item.userLimit || i.userLimit;
                })
            })
            await SysDiProductPlanApi().batchEdit(state.arrList);
            closeDialog();
        });
    } else {
        state.isTwoShowDialog = false;
        ruleFormRef.value.validate(async (valid: boolean) => {
            if (!valid) return;
            let arr: any = [{
                arrivalType: -1,
                dailyEndHour: -1,
                dailyStartHour: -1,
                requestLimit: -1,
                status: -1,
                syncPlanDaily: -1,
                userLimit: -1,
            }];
            let obj = Object.assign(arr[0], state.ruleForm)
            arr[0] = obj;
            arr.map((item: any) => {
                state.arrList.forEach(i => {
                    i.arrivalType = item.arrivalType || i.arrivalType;
                    i.dailyEndHour = item.dailyEndHour || i.dailyEndHour;
                    i.dailyStartHour = item.dailyStartHour || i.dailyStartHour;
                    i.requestLimit = item.requestLimit || i.requestLimit;
                    i.status = item.status || i.status;
                    i.syncPlanDaily = item.syncPlanDaily || i.syncPlanDaily;
                    i.userLimit = item.userLimit || i.userLimit;
                })
            })
            await SysDiProductPlanApi().batchEdit(state.arrList);
            closeDialog();
        });
    }
    ElMessage({
        type: 'success',
        message: '修改成功',
    })
};

// 移除
const deleteRow = (val: any) => {
    state.tableData.splice(val, 1);
}

// 二次设置
const secondarySetup = (val: any) => {
    if (val == 'time') {
        state.trends = 'time'
        state.isTwoShowDialog = true;
    } else {
        state.isTwoShowDialog = true;
        state.trends = 'type'
    }
}

// 导出对象
defineExpose({ openDialogedit });
</script>
